<template>
	<!--流程-->
	<view class="com-content">
		<view class="com-body" @click="todet(objlist)">
			<block v-for="(item,index) in objlist" :key="index">
			    <view class="com-body-box">
					<view class="box-l" v-if="index===0">
						<view class="box-t-line" style="opacity: 0;"></view>
						<view class="box-l-yuan"></view>
						<view class="box-b-line"></view>
					</view>
					<view class="box-l" v-else-if="index===(objlist.length - 1)">
						<view class="box-t-line"></view>
						<view class="box-l-yuan"></view>
						<view class="box-b-line" style="opacity: 0;"></view>
					</view>
					<view class="box-l" v-else>
						<view class="box-t-line"></view>
						<view class="box-l-yuan"></view>
						<view class="box-b-line"></view>
					</view>
					<view class="box-r">
						<view class="box-r-l">
							<view class="box-r-tit">
								<view class="box-r-tit-l">
									<image class="r-tit-img" :src="item.img || $mAssetsPath.icon_mrtx"></image>
									<view class="r-tit-name">{{item.nickname}}</view>
									<view class="r-tit-tag" v-if="item.role_name != null">{{item.role_name}}</view>
								</view>
								<view class="box-r-tit-r" :style="{color:item.flows==='发起'?'#333':item.flows==='驳回'?'#FE5252':item.flows==='通过'?'#15BC83':item.flows==='结束'?'#333333':''}">{{item.flows}}</view>
							</view>
							<view class="box-r-txt"><text class="box-r-txt2">批注：</text>{{item.mark}}</view>
						</view>
						<view class="box-r-r icons icon-gengduo"></view>
					</view>
			    </view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "com-top",
		components: {

		},
		props: {
			objlist: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			todet(list){
				this.$emit('todet',list)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 30rpx 0;
		.com-body {
		    display: flex;
		    width: 100%;
		    flex-direction: column;
			.com-body-box{
				display: flex;
				.box-l{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 50rpx;
					.box-l-yuan{
						width: 24rpx;
						height: 24rpx;
						background: #EEEEEE;
						border-radius: 12rpx;
					}
					.box-t-line{
						height: calc(50% - 12rpx);
						width: 2rpx;
						background: #EEEEEE;
					}
					.box-b-line{
						height: calc(50% - 12rpx);
						width: 2rpx;
						background: #EEEEEE;
					}
				}
				.box-r{
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: $uni-bg-color-grey;
					padding: 30rpx;
					margin: 15rpx 0;
					border-radius: 4rpx;
					width: calc(100% - 50rpx);
					.box-r-r{
						width: 60rpx;
						text-align: right;
					}
					.box-r-txt{
						width: 100%;
						font-size: 28rpx;
						font-weight: 400;
						color:$font-color-9;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						.box-r-txt2{
							color: $font-color-3;
						}
						
					}
					.box-r-l{
						display: flex;
						flex-direction: column;
						width: calc(100% - 60rpx);
						.box-r-tit{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20rpx;
							.box-r-tit-l{
								display: flex;
								.r-tit-img{
									width: 40rpx;
									height: 40rpx;
									margin-right: 20rpx;
								}
								.r-tit-name{
									font-size: 32rpx;
									font-weight: 400;
									color: $font-color-3;
									margin-right: 20rpx;
								}
								.r-tit-tag{
									font-size: 20rpx;
									font-weight: 400;
									color: $font-color-b3;
									border: 1rpx solid $font-color-b3;
									height: 38rpx;
									line-height: 36rpx;
									padding: 0 8rpx;
									border-radius: 4rpx;
								}
							}
							.box-r-tit-r{
								font-size: 28rpx;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}
	
	
</style>
